<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
//引入用户操作相关的 api
import { updateUserInfo } from '@/api/user'
import { getUserInfo } from '@/api/userInfo'
import { ElMessage, type FormInstance } from 'element-plus'
// 用户连接常量
import { VITE_API_BASEURL } from '@/emnu/index.js'
import changePassword from './components/changePwd.vue'
import { useUserInfor } from '@/store/userInfo'
const activeName = ref('first')
// onMounted 钩子函数获取用户信息
const userStore = useUserInfor()
onMounted(async () => {
  // 获取账户 id
  let id = parseInt(localStorage.getItem('id'))
  console.log(typeof id)
  const res = await getUserInfo(id)
  console.log(res)
  userData.account = res.data.account
  userData.name = res.data.name
  userData.sex = userStore.sex
  userData.identity = userStore.identity
  userData.department = userStore.department
  userData.email = res.data.email
})
interface userDataType {
  id: number
  account: number
  name: string
  sex: string
  identity: string
  department: string
  email: string
}
const avatarUrl = ref(`${VITE_API_BASEURL}/user/uploadAvatar`)
const userData: userDataType = reactive({
  id: parseInt(localStorage.getItem('id')),
  account: 0,
  name: '',
  sex: '',
  identity: '',
  department: '',
  email: ''
})

const formRef = ref<FormInstance>()

const submitForm = async (userData: userDataType) => {
  try {
    const { id, sex, name, email } = userData
    const data = {
      id,
      sex,
      name,
      email
    }
    const res = await updateUserInfo(data)
    if (res.status === 200) {
      ElMessage.success(res.data.message)
    } else {
      ElMessage.error(res.data.message)
    }
  } catch (error) {
    ElMessage.error(error)
  }
}

const changePwd = ref()

// 打开修改密码弹窗
const openchangePwd = () => {
  changePwd.value.openChangePwd()
}
</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="账号详情" name="first">
      <!-- 用户头像区域 -->
      <div class="account-info-wrapped">
        <span>用户头像：</span>
        <div class="account-info-content">
          <!-- action 是上传头像的接口 -->
          <el-upload class="avatar-uploader">
            <img />
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </div>
      </div>
      <el-form class="login-form" ref="formRef">
        <el-form-item label="用户账号:">
          <el-input v-model="userData.account" disabled />
        </el-form-item>
        <el-form-item label="用户姓名:">
          <el-input v-model="userData.name" />
        </el-form-item>
        <el-form-item label="用户性别:">
          <el-input v-model="userData.sex" />
        </el-form-item>
        <el-form-item label="用户身份:">
          <el-input v-model="userData.identity" disabled />
        </el-form-item>
        <el-form-item label="用户部门:">
          <el-input v-model="userData.department" disabled />
        </el-form-item>
        <el-form-item label="用户邮箱:">
          <el-input v-model="userData.email" />
        </el-form-item>
        <el-form-item label="修改密码:">
          <el-button style="margin-left: 15px" @click="openchangePwd"
            >修改密码</el-button
          >
          <el-input placeholder="*****" disabled />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(userData)"
            >确认修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="公司信息" name="second">公司详情</el-tab-pane>
    <el-tab-pane label="首页管理" name="third">首页管理</el-tab-pane>
    <el-tab-pane label="其他设置" name="fourth">其他设置</el-tab-pane>
  </el-tabs>
  <changePassword ref="changePwd"></changePassword>
</template>

<style lang="less" scoped>
:deep(.el-tabs__content) {
  width: 400px;
  padding-left: 50px;
}
:deep(.el-form-item__content) {
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  justify-content: space-between;
}
// 账号信息外壳
.account-info-wrapped {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  font-size: 14px;

  // 账号信息内容
  .account-info-content {
    margin-left: 24px;
    margin-right: 16px;
  }

  // 按钮
  .account-save-button {
    margin-left: 16px;
  }

  :deep(.el-input .is-disabled) {
    width: 225px;
  }
}
</style>
